<template>
    <div class="center_Div flexC width1200">
        <div class="flexR center_1">
            <!--招聘会列表-->
            <div class="flexC">
                <div class="flexC">
                    <p>招聘会列表</p>
                    <ul class="flexC">
                        <li class="flexR text1"><a href="">>>2020年2月15日春季人力资源招聘会招聘会</a></li>
                        <li class="flexR text1"><a href="">>>2020年2月15日春季人力资源招聘会招聘会</a></li>
                        <li class="flexR text1"><a href="">>>2020年2月15日春季人力资源招聘会招聘会</a></li>
                        <li class="flexR text1"><a href="">>>2020年2月15日春季人力资源招聘会招聘会</a></li>
                        <li class="flexR text1"><a href="">>>2020年2月15日春季人力资源招聘会招聘会</a></li>
                        <li class="flexR text1"><a href="">>>2020年2月15日春季人力资源招聘会招聘会</a></li>
                        <li class="flexR text1"><a href="">>>2020年2月15日春季人力资源招聘会招聘会</a></li>
                    </ul>
                    <a href="">更多招聘会>></a>
                </div>
                <div class="flexC">
                    <h3>我们郑重承诺：</h3>
                    <p>我们只接受正规、高质量企业<br>全力为求职者打造放心、高效的绿色求职平台</p>
                </div>
            </div>
            <div class="flexC">
                <!--轮播-->
                <Carousel loop autoplay :radius-dot="true" trigger="hover" :autoplay-speed="3000">
                    <CarouselItem>
                        <img src="../../assets/home/1XifMDhwujEnfkoMgls8NwxhNGucwhmoiZBsqw3y.png" alt="">
                    </CarouselItem>
                    <CarouselItem>
                        <img src="../../assets/home/cS6DR7JQuZreHvagNscIz8zlTmKGsMwUIiUdab08.png" alt="">
                    </CarouselItem>
                    <CarouselItem>
                        <img src="../../assets/home/5c2056fa21daf.jpg" alt="">
                    </CarouselItem>
                </Carousel>
                <div class="flexR">
                    <!--通知-->
                    <div class="flexC">
                        <p class="flexR"><span>通知</span><a href="">更多>></a></p>
                        <ul class="flexC">
                            <li class="flexR">
                                <a class="text1" href="">赴渤海船舶职业学院参加2020届 毕业生舟山市专场招聘会</a>
                                <img src="../../assets/home/new.png" alt="">
                            </li>
                            <li class="flexR"><a class="text1" href="">赴渤海船舶职业学院参加2020届 毕业生舟山市专场招聘会</a></li>
                            <li class="flexR"><a class="text1" href="">赴渤海船舶职业学院参加2020届 毕业生舟山市专场招聘会</a></li>
                            <li class="flexR"><a class="text1" href="">赴渤海船舶职业学院参加2020届 毕业生舟山市专场招聘会</a></li>
                            <li class="flexR"><a class="text1" href="">赴渤海船舶职业学院参加2020届 毕业生舟山市专场招聘会</a></li>
                            <li class="flexR"><a class="text1" href="">赴渤海船舶职业学院参加2020届 毕业生舟山市专场招聘会</a></li>
                        </ul>
                    </div>
                    <!--国有企事业单位招聘公告-->
                    <div class="flexC">
                        <p class="flexR"><span>国有企事业单位招聘公告</span><a href="">更多>></a></p>
                        <ul class="flexC">
                            <li class="flexR">
                                <a class="text1" href="">赴渤海船舶职业学院参加2020届 毕业生舟山市专场招聘会</a>
                                <img src="../../assets/home/new.png" alt="">
                            </li>
                            <li class="flexR"><a class="text1" href="">赴渤海船舶职业学院参加2020届 毕业生舟山市专场招聘会</a></li>
                            <li class="flexR"><a class="text1" href="">赴渤海船舶职业学院参加2020届 毕业生舟山市专场招聘会</a></li>
                            <li class="flexR"><a class="text1" href="">赴渤海船舶职业学院参加2020届 毕业生舟山市专场招聘会</a></li>
                            <li class="flexR"><a class="text1" href="">赴渤海船舶职业学院参加2020届 毕业生舟山市专场招聘会</a></li>
                            <li class="flexR"><a class="text1" href="">赴渤海船舶职业学院参加2020届 毕业生舟山市专场招聘会</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flexC">
                <!--注册/登陆-->
                <div class="flexC">
                    <a class="flexR">
                        <img src="../../assets/home/per_icon.png" alt="">
                        <a>个人注册/登录</a>
                    </a>
                    <a class="flexR">
                        <img src="../../assets/home/com_icon.png" alt="">
                        <span>企业注册/登录</span>
                    </a>
                </div>
                <!--高校毕业生+人力机构等-->
                <div class="flexR">
                    <a class="flexC">
                        <p>高校毕业生</p>
                    </a>
                    <a class="flexC">
                        <p>高校毕业生</p>
                    </a>
                    <a class="flexC">
                        <p>高校毕业生</p>
                    </a>
                    <a class="flexC">
                        <p>高校毕业生</p>
                    </a>
                </div>
            </div>
        </div>
        <!--紧急招聘 推荐职位-->
        <div class="flexC center_2">
            <Tabs >
                <TabPane label="紧急招聘" name="name1">
                    <div class="flexR item">
                        <div class="flexC" v-for="(item,index) in jjzp" :key="index">
                            <p class="flexR">{{item.name}} ({{item.num}}) <img v-if="item.type" style="margin-left: 5px" src="../../assets/home/index_emergency.png" alt=""></p>
                            <p>更新日期: <span style="color:#ff3963">{{item.time}}</span> 待遇: {{item.dy}}</p>
                        </div>
                    </div>
                </TabPane>
                <TabPane label="推荐职位" name="name2">
                    <div class="flexR item">
                        <div class="flexC" v-for="(item,index) in jjzp" :key="index">
                            <p>{{item.name}} ({{item.num}})</p>
                            <p>更新日期: <span style="color:#ff3963">{{item.time}}</span> 待遇: {{item.dy}}</p>
                        </div>
                    </div>
                </TabPane>
            </Tabs>
        </div>
        <!--广告位-->
        <div class="flexC">
            <img style="height: 80px" src="../../assets/home/5a5c5354da643.jpg" alt="" title="横幅">
        </div>
        <!--最新职位-->
        <div class="flexC zxzw">
            <div class="flexR tab">
                <div class="flexR"><img style="height: 25px;margin-top: -5px;" src="../../assets/home/index_title_latest_jobs.png" alt=""><span>最新职位</span></div>
                <div class="flexR">
                    <a :class="{active:tab === 0}" @click="zxzwTabSwitch(0)">全部</a>
                    <a :class="{active:tab === 1}" @click="zxzwTabSwitch(1)">批发/零售</a>
                    <a :class="{active:tab === 2}" @click="zxzwTabSwitch(2)">建筑与工程</a>
                    <a :class="{active:tab === 3}" @click="zxzwTabSwitch(3)">酒店/旅游</a>
                    <a :class="{active:tab === 4}" @click="zxzwTabSwitch(4)">餐饮/娱乐/休闲</a>
                    <a :class="{active:tab === 5}" @click="zxzwTabSwitch(5)">仪器仪表/工业自动化</a>
                    <a :class="{active:tab === 6}" @click="zxzwTabSwitch(6)">教育/培训</a>
                </div>
                <a>更多>></a>
            </div>
            <div class="flexR">
                <div class="flexC" v-for="(item,index) in zxzwList" :key="index">
                    <p class="flexR">
                        <span>{{item.name}}</span>
                        <span style="color:#ff3963">{{item.time}}</span>
                    </p>
                    <p class="flexR">聘： <span v-for="(it,ind) in item.zw" :key="it+index" v-if="ind < 3">{{it}}</span></p>
                </div>
            </div>
        </div>

        <!--照片简历-->
        <div class="flexC zpjl">
            <div class="flexR tab">
                <div class="flexR"><img style="height: 25px;margin-top: -5px;" src="../../assets/home/index_title_resume_photo.png" alt=""><span>照片简历</span></div>
            </div>
            <div class="flexR" id="zpjlList">
                <div class="flexC imgItem" v-for="(item,index) in zpjlList" :key="index">
                    <img :src="item.img" alt="">
                    <p>{{item.name}}</p>
                    <div class="bg flexC">
                        <p class="flexR">
                            <span>{{item.xl}}</span>
                            <span>{{item.year}}</span>
                        </p>
                        <p class="flexR">
                            {{item.zw | zwType}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="flexR" style="align-items: flex-start;">
            <!--最新简历-->
            <div class="flexC zxjl">
                <div class="flexR tab">
                    <div class="flexR"><img style="height: 25px;margin-top: -5px;" src="../../assets/home/index_title_resume_latest.png" alt=""><span>最新简历</span></div>
                </div>
                <div class="flexR">
                    <Table :columns="zxjlColumns" :data="zxjlList" :width="840">
                        <template slot-scope="{row,index}" slot="qzyx">
                            <span :title="row.qzyx">{{row.qzyx.join('/')}}</span>
                        </template>
                        <template slot-scope="{row ,index}" slot="sxsj">
                            <img style="height: 18px;" v-if="index<4" src="../../assets/home/stick.png" alt="">
                            <span v-else style="color: red">[{{row.sxsj}}]</span>
                        </template>
                    </Table>
                </div>
            </div>
            <div class="flexC" style="width: calc(100% - 910px);margin-left: 10px;justify-content: space-between;height: 380px;">
                <!--最新下载简历-->
                <div class="flexC zxxzjl">
                    <div class="flexR tab">
                        <div class="flexR"><img style="height: 25px;margin-top: -5px;" src="../../assets/home/index_title_resume_download.png" alt=""><span>最新下载简历</span></div>
                    </div>
                    <div class="flexC">
                        <p class="flexR">
                            <span class="blue">舟山新征程...</span>
                            <span>下载了<span class="blue">张**</span> 的简历</span>
                            <span style="color: red">28分钟前</span>
                        </p>
                        <p class="flexR">
                            <span class="blue">舟山新征程...</span>
                            <span>下载了<span class="blue">张**</span> 的简历</span>
                            <span style="color: red">28分钟前</span>
                        </p>
                        <p class="flexR">
                            <span class="blue">舟山新征程...</span>
                            <span>下载了<span class="blue">张**</span> 的简历</span>
                            <span style="color: red">28分钟前</span>
                        </p>
                        <p class="flexR">
                            <span class="blue">舟山新征程...</span>
                            <span>下载了<span class="blue">张**</span> 的简历</span>
                            <span style="color: red">28分钟前</span>
                        </p>
                        <p class="flexR">
                            <span class="blue">舟山新征程...</span>
                            <span>下载了<span class="blue">张**</span> 的简历</span>
                            <span style="color: red">28分钟前</span>
                        </p>
                        <p class="flexR">
                            <span class="blue">舟山新征程...</span>
                            <span>下载了<span class="blue">张**</span> 的简历</span>
                            <span style="color: red">28分钟前</span>
                        </p>
                    </div>
                </div>
                <!--热门简历标签-->
                <div class="flexC rmjlbq">
                    <div class="flexR tab">
                        <div class="flexR"><img style="height: 25px;margin-top: -5px;" src="../../assets/home/index_title_tags.png" alt=""><span>热门简历标签</span></div>
                    </div>
                    <div class="flexR" style="flex-wrap: wrap">
                        <span>形象好</span><span>形象好</span><span>形象好</span><span>形象好</span>
                        <span>形象好</span><span>形象好</span><span>形象好</span><span>形象好</span>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    import userImg from '@/assets/home/user1.jpg'
    import {jQuery} from '@/plugins/jquery.rollGallery_yeso.js'
    import '@/plugins/jquery.rollGallery_yeso.js'
    export default {
        name: "Center1",
        components: {
        },
        data() {
            return {
                // 紧急招聘
                jjzp: [
                    {
                        name: '仓库保管员',
                        num: '2',
                        time: '一周前',
                        dy: '3千~5千/月',
                        type: 1 // 急
                    },
                    {
                        name: '仓库保管员',
                        num: '2',
                        time: '一周前',
                        dy: '3千~5千/月'
                    },
                    {
                        name: '仓库保管员',
                        num: '2',
                        time: '一周前',
                        dy: '3千~5千/月',
                        type: 1 // 急
                    },
                    {
                        name: '仓库保管员',
                        num: '2',
                        time: '一周前',
                        dy: '3千~5千/月'
                    },
                    {
                        name: '仓库保管员',
                        num: '2',
                        time: '一周前',
                        dy: '3千~5千/月',
                        type: 1 // 急
                    },
                    {
                        name: '仓库保管员',
                        num: '2',
                        time: '一周前',
                        dy: '3千~5千/月'
                    },
                    {
                        name: '仓库保管员',
                        num: '2',
                        time: '一周前',
                        dy: '3千~5千/月'
                    },
                    {
                        name: '仓库保管员',
                        num: '2',
                        time: '一周前',
                        dy: '3千~5千/月',
                        type: 1 // 急
                    },
                    {
                        name: '仓库保管员',
                        num: '2',
                        time: '一周前',
                        dy: '3千~5千/月'
                    },
                    {
                        name: '仓库保管员',
                        num: '2',
                        time: '一周前',
                        dy: '3千~5千/月'
                    },
                    {
                        name: '仓库保管员',
                        num: '2',
                        time: '一周前',
                        dy: '3千~5千/月'
                    },
                    {
                        name: '仓库保管员',
                        num: '2',
                        time: '一周前',
                        dy: '3千~5千/月'
                    }
                ],
                tab: 0, // 最新职位 默认tab
                // 最新职位
                zxzwList: [
                    {
                        name: '浙江瑞祥新能源科技有限公司',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                        time: '38分钟前',
                    },
                    {
                        name: '浙江瑞祥新能源科技有限公司',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                        time: '38分钟前',
                    },
                    {
                        name: '浙江瑞祥新能源科技有限公司',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                        time: '38分钟前',
                    },
                    {
                        name: '浙江瑞祥新能源科技有限公司',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                        time: '38分钟前',
                    },
                    {
                        name: '浙江瑞祥新能源科技有限公司',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                        time: '38分钟前',
                    },
                    {
                        name: '浙江瑞祥新能源科技有限公司',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                        time: '38分钟前',
                    },
                ],
                // 照片简历
                zpjlList: [
                    {
                        img: userImg,
                        xl: '本科',
                        year: '3-4年',
                        name: '夏小樱',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                    },
                    {
                        img: userImg,
                        xl: '本科',
                        year: '3-4年',
                        name: '夏小樱',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                    },
                    {
                        img: userImg,
                        xl: '本科',
                        year: '3-4年',
                        name: '夏小樱',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                    },
                    {
                        img: userImg,
                        xl: '本科',
                        year: '3-4年',
                        name: '夏小樱',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                    },
                    {
                        img: userImg,
                        xl: '本科',
                        year: '3-4年',
                        name: '夏小樱',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                    },
                    {
                        img: userImg,
                        xl: '本科',
                        year: '3-4年',
                        name: '夏小樱',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                    },
                    {
                        img: userImg,
                        xl: '本科',
                        year: '3-4年',
                        name: '夏小樱',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                    },
                    {
                        img: userImg,
                        xl: '本科',
                        year: '3-4年',
                        name: '夏小樱',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                    },
                    {
                        img: userImg,
                        xl: '本科',
                        year: '3-4年',
                        name: '夏小樱',
                        zw: ['施工员','业务销售','管理员','项目经理'],
                    },
                ],
                // 最新简历
                zxjlColumns: [
                    {
                        title: '姓名',
                        key: 'name',
                        width: 70
                    },
                    {
                        title: '性别',
                        key: 'sex',
                        width: 70,
                        align: 'center'
                    },
                    {
                        title: '学历',
                        key: 'xl',
                        width: 90,
                        align: 'center'
                    },
                    {
                        title: '工作经验',
                        key: 'gzjy',
                        width: 120,
                        align: 'center'
                    },
                    {
                        title: '求职意向',
                        slot: 'qzyx',
                        ellipsis: true
                    },
                    {
                        title: '刷新时间',
                        slot: 'sxsj',
                        align: 'center',
                        width: 120
                    }
                ],
                zxjlList: [
                    {
                        name: '施男',
                        sex: '男',
                        xl: '本科',
                        qzyx: ['施工员','业务销售'],
                        gzjy: '5-10年',
                        sxsj: '1分钟前'
                    },
                    {
                        name: '施男',
                        sex: '男',
                        xl: '本科',
                        qzyx: ['管理员'],
                        gzjy: '5-10年',
                        sxsj: '5分钟前'
                    },
                    {
                        name: '施男',
                        sex: '男',
                        xl: '本科',
                        qzyx: ['施工员','业务销售','管理员','项目经理'],
                        gzjy: '5-10年',
                        sxsj: '1分钟前'
                    },
                    {
                        name: '施男',
                        sex: '男',
                        xl: '本科',
                        qzyx: ['施工员','业务销售','管理员','项目经理'],
                        gzjy: '5-10年',
                        sxsj: '1分钟前'
                    },
                    {
                        name: '施男',
                        sex: '男',
                        xl: '本科',
                        qzyx: ['施工员','业务销售','管理员','项目经理'],
                        gzjy: '5-10年',
                        sxsj: '1分钟前'
                    },
                    {
                        name: '施男',
                        sex: '男',
                        xl: '本科',
                        qzyx: ['施工员','业务销售','管理员','项目经理'],
                        gzjy: '5-10年',
                        sxsj: '1分钟前'
                    },
                ],
            }
        },
        computed: {},
        mounted() {
            this.$nextTick(()=>{
                this.imgSwitch()
            })
        },
        methods: {
            // 最新职位 tab切换
            zxzwTabSwitch(n) {
                this.tab = n
            },
            // 图片简历滚动
            imgSwitch(){
                jQuery("#zpjlList").rollGallery({
                    direction:"left",
                    aniSpeed:2500,
                    noStep : false,
                    speedPx : 1,
                    rollNum:2,
                    speed:5000,
                    aniMethod:"swing",
                    showNum:7
                });
            }
        },
        filters: {
            // 职位数组转字符串
            zwType(arr){
                if(arr){
                    if(arr.length>0){
                        return arr.join('/')
                    }
                }
            }
        }
    }
</script>

<style lang="less">
    .center_Div{
        margin: 0 auto;
        &>div{
            margin-top: 15px;
        }
        .center_1{
            height: 350px;
            justify-content: space-between;
            &>div{
                height: 350px;
                justify-content: space-between;
            }
            // 招聘会列表
            &>div:nth-child(1){
                width: 263px;
                border: 1px solid #ddd;
                border-top-width: 2px;
                border-bottom: none;
                // 列表
                &>div:nth-child(1){
                    position: relative;
                    &>p:nth-child(1){
                        margin: 10px 0px 13px 15px;
                        font-size: 16px;
                        color: #0087ff;
                    }
                    ul{
                        li{
                            padding-left: 8px;
                            padding-right: 1px;
                        }
                    }
                    &>a{
                        margin: 10px 0;
                        text-align: right;
                        font-size: 12px;
                        color: #ff3963;
                        padding-right: 15px;
                    }
                }
                // 承诺
                &>div:last-child{
                    padding: 15px 5px 0px;
                    height: 85px;
                    background: url(../../assets/home/index_promise_bg.png) no-repeat top center;
                    h3{
                        font-size: 16px;
                        margin: 0px;
                        color: #ffea00;
                    }
                    p{
                        margin-top: 5px;
                        line-height: 20px;
                        color: #fff;
                        font-size: 12px;
                    }
                }
            }
            &>div:nth-child(2){
                // 轮播
                &>div:first-child{
                    width: 640px;
                    height: 152px;
                    margin-top: 0;
                }
                &>div:last-child{
                    padding: 0 6px;
                    border: 1px solid #ddd;
                    width: 100%;
                    height: 185px;
                    justify-content: space-between;
                    // 通知
                    &>div:first-child{
                        width: 320px;
                        border-right: 1px dotted #cdcdcd;
                        padding-right: 15px;
                    }
                    &>div:last-child{
                        width: 290px;
                    }
                    p{
                        margin-left: 10px;
                        margin-bottom: 5px;
                        justify-content: space-between;
                        span{
                            font-size: 16px;
                            color: #0087ff;
                        }
                        a{
                            color: #c7c8ca;
                            font-size: 12px;
                        }
                    }
                    ul {
                        li {
                            justify-content: space-between;
                            position: relative;

                            &:before {
                                position: absolute;
                                top: 10px;
                                left: 0px;
                                width: 5px;
                                height: 5px;
                                background-color: #666;
                                border-radius: 50%;
                                content: '';
                            }

                            a {
                                margin-left: 10px;
                            }

                            img {
                                width: 35px
                            }
                        }
                    }
                }
            }
            &>div:nth-child(3){
                width: 265px;
                // 注册/登陆
                &>div:first-child{
                    width: 100%;
                    height: 144px;
                    margin-top: 0;
                    border: 1px solid #e0e0e0;
                    background-color: #fff;
                    &>a{
                        justify-content: space-around;
                        height: 50%;
                        line-height: 72px;
                        font-size: 16px;
                        padding: 0 10px;
                        font-weight: bold;
                        &:first-child{
                            border-bottom: 1px solid #e0e0e0;
                            &:hover{
                                background-color: #FEF3E8;
                            }
                        }
                        &:last-child{
                            &:hover{
                                background-color: #E8F5FE;
                            }
                        }
                    }
                }
                // 高校毕业生
                &>div:last-child{
                    flex-wrap: wrap;
                    height: 185px;
                    border: 1px solid #ddd;
                    &>a{
                        width: calc(50% - 1px);
                        border-right: 1px solid #ddd;
                        height: calc(50% - 1px);
                        border-bottom: 1px solid #ddd;
                        text-align: center;
                        color: #4d4d4d;
                        align-items: center;
                        justify-content: center;
                        p{
                            margin-top: 35px;
                        }
                        &:nth-child(2n){
                            border-right: none;
                        }
                        &:nth-child(1){
                            background: url(../../assets/home/link01.png)no-repeat center 15px;
                            &:hover{
                                background: url(../../assets/home/link01_hover.png)no-repeat center 15px;
                                background-color: #0087FF;
                                color: #fff;
                            }
                        }
                        &:nth-child(2){
                            background: url(../../assets/home/link02.png)no-repeat center 15px;
                            &:hover{
                                background: url(../../assets/home/link02_hover.png)no-repeat center 15px;
                                background-color: #0087FF;
                                color: #fff;
                            }
                        }
                        &:nth-child(3){
                            background: url(../../assets/home/link03.png)no-repeat center 15px;
                            &:hover{
                                background: url(../../assets/home/link03_hover.png)no-repeat center 15px;
                                background-color: #0087FF;
                                color: #fff;
                            }
                        }
                        &:nth-child(4){
                            background: url(../../assets/home/link04.png)no-repeat center 15px;
                            &:hover{
                                background: url(../../assets/home/link04_hover.png)no-repeat center 15px;
                                background-color: #0087FF;
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
        // 紧急招聘 推荐职位
        .center_2{
            .ivu-tabs{
                border: 1px solid #ddd;
                .ivu-tabs-bar{
                    border-bottom: none;
                    margin-bottom: 0px;
                }
                .ivu-tabs-nav{
                    margin-left: 20px;
                    .ivu-tabs-tab{
                        font-size: 16px;
                        &:hover{
                            color: #0087ff;
                        }
                    }
                    .ivu-tabs-tab-active{
                        color: #0087ff;
                    }
                }
                .item{
                    flex-wrap: wrap;
                    &>div{
                        width: 25%;
                        padding:5px 0px 5px 20px;
                        &>p:first-child{
                            color: #0087ff;
                        }
                    }
                }
            }
        }
        // 最新职位
        .zxzw{
            // tab切换
            &>.tab{
                justify-content: space-between;
                border-bottom: 2px solid #e9e9e9;
                height: 30px;
                &>div:nth-child(1){
                    font-size: 16px;
                }
                &>div:nth-child(2){
                    width: calc(100% - 260px);
                    a{
                        color: #666;
                        padding: 5px 5px 3px;
                        position: relative;
                        &:hover{
                            color: #0087ff;
                            &:before{
                                position: absolute;
                                bottom: -2px;
                                left: 0;
                                height: 4px;
                                width: calc(100% - 5px);
                                background-color: #0087ff;
                                content: '';
                            }
                        }
                    }
                    .active{
                        color: #0087ff;
                        &:before{
                            position: absolute;
                            bottom: -2px;
                            left: 0;
                            height: 4px;
                            width: calc(100% - 5px);
                            background-color: #0087ff;
                            content: '';
                        }
                    }
                }
                &>a{
                    color: #c7c8ca;
                    font-size: 12px;
                    &:hover{
                        color: #ff3963;
                    }
                }
            }
            &>div:nth-child(2){
                margin-top: 15px;
                flex-wrap: wrap;
                &>div{
                    width: 25%;
                    padding-left: 9px;
                    padding-right: 5px;
                    border: 1px solid #dcdcdc;
                    position: relative;
                    cursor: pointer;
                    &>p{
                        margin-top: 15px;
                    }
                    &>p:nth-child(1){
                        justify-content: space-between;
                        &>span:nth-child(1){
                            max-width: 200px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    &>p:last-child{
                        margin-bottom: 15px;
                        span{
                            width: 80px;
                            margin-right: 4px;
                            max-width: 80px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    &:hover{
                        &>p:nth-child(1){
                            &>span:nth-child(1){
                                color: #0087ff;
                            }
                        }
                    }
                    // 动画
                    &:before{position: absolute;top: -1px;right: -1px;bottom: -1px;left: -1px;content: '';opacity: 0;-ms-filter:alpha(opacity=0);filter:alpha(opacity=0);border-top: 2px solid #0087ff;border-bottom: 2px solid #0087ff;border-top: 0px\9;border-bottom: 0px\9;-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;transition: opacity 0.5s, transform 0.5s;-webkit-transform: scale(0,1);-ms-transform: scale(0,1);transform: scale(0,1);}
                    &:after{position: absolute;top: -1px;right: -1px;bottom: -1px;left: -1px;content: '';opacity: 0;-ms-filter:alpha(opacity=0);filter:alpha(opacity=0);border-right: 2px solid #0087ff;border-left: 2px solid #0087ff;border-right: 0px\9;border-left: 0px\9;-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;transition: opacity 0.5s, transform 0.5s;-webkit-transform: scale(1,0);transform: scale(1,0);-ms-transform:scale(1,0);}
                    &:hover:before,&:hover:after{opacity: 1;filter:alpha(opacity=100);-webkit-transform: scale(1);transform: scale(1);-ms-transform:scale(1);-o-transform:scale(1);}
                }
            }
        }
        // 照片简历
        .zpjl{
            // tab切换
            position: relative;
            overflow: hidden;
            height: 220px;
            &>.tab{
                justify-content: space-between;
                height: 30px;
                &>div:nth-child(1){
                    font-size: 16px;
                }
                &>div:nth-child(2){
                    width: calc(100% - 260px);
                }
                &>a{
                    color: #c7c8ca;
                    font-size: 12px;
                    &:hover{
                        color: #ff3963;
                    }
                }
            }
            &>div:nth-child(2){
                margin-top: 15px;
                position: absolute;
                top: 15px;
                .imgItem{
                    width: 162px;
                    align-items: center;
                    padding-left: 9px;
                    padding-right: 5px;
                    border: 1px solid #dcdcdc;
                    position: relative;
                    cursor: pointer;
                    margin-right: 10px;
                    height: 185px;
                    &>img{
                        margin-top: 15px;
                        width: 75px;
                        height: 75px;
                        border-radius: 50%;
                    }
                    &>p{
                        margin-top: 5px;
                    }
                    &>.bg{
                        width: 160px;
                        align-items: center;
                        background-color: #f2f2f2;
                        margin-left: -9px;
                        margin-right: -5px;
                        flex-grow: 2;
                        justify-content: center;
                        &>p:nth-child(1) {
                            justify-content: space-between;
                            span:last-child {
                                margin-left: 5px;
                            }
                        }
                        &>p:last-child{
                            max-width: 140px;
                            display: inline-block;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    &:hover{
                        &>p:nth-child(1){
                            &>span:nth-child(1){
                                color: #0087ff;
                            }
                        }
                    }
                    // 动画
                    &:before{position: absolute;top: -1px;right: -1px;bottom: -1px;left: -1px;content: '';opacity: 0;-ms-filter:alpha(opacity=0);filter:alpha(opacity=0);border-top: 2px solid #0087ff;border-bottom: 2px solid #0087ff;border-top: 0px\9;border-bottom: 0px\9;-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;transition: opacity 0.5s, transform 0.5s;-webkit-transform: scale(0,1);-ms-transform: scale(0,1);transform: scale(0,1);}
                    &:after{position: absolute;top: -1px;right: -1px;bottom: -1px;left: -1px;content: '';opacity: 0;-ms-filter:alpha(opacity=0);filter:alpha(opacity=0);border-right: 2px solid #0087ff;border-left: 2px solid #0087ff;border-right: 0px\9;border-left: 0px\9;-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;transition: opacity 0.5s, transform 0.5s;-webkit-transform: scale(1,0);transform: scale(1,0);-ms-transform:scale(1,0);}
                    &:hover:before,&:hover:after{opacity: 1;filter:alpha(opacity=100);-webkit-transform: scale(1);transform: scale(1);-ms-transform:scale(1);-o-transform:scale(1);}
                }
            }
        }
        // 最新简历
        .zxjl{
            &>.flexR:nth-child(2){
                border: 1px solid #eee;
                padding: 15px 25px;
                .ivu-table th{
                    background-color: #fff;
                }
            }
        }
        // 最新下载简历
        .zxxzjl{
            &>div:nth-child(2){
                border: 1px solid #eee;
                padding: 15px 5px;
                &>p{
                    height: 30px;
                    justify-content: space-between;
                }
                .blue{
                    color: #0087ff;
                }
            }
        }
        // 热门简历标签
        .rmjlbq{
            &>div:nth-child(2){
                border: 1px solid #eee;
                padding: 15px 25px;
                span{
                    color: #666;
                    line-height: 24px;
                    width: 72px;
                    text-align: left;
                    height: 24px;
                    cursor: pointer;
                    &:hover{
                        color: red;
                    }
                }
            }
        }
    }
</style>